import React from 'react';
import {
  View,
  StyleSheet,
  SafeAreaView,
  TouchableOpacity,
  ActivityIndicator,
  InteractionManager,
} from 'react-native';
import { BackImage, msg, XMEmpty, XMListView } from '@/common';
import { empty01 } from '@/images';
import {
  isAndroid,
  mainBgColorLightGray,
  mainBgColorWhite,
  screenWidth,
  screenHeight,
  px2dp,
} from '@/styles';
import { HeadTabs } from '@/components';
import api from '@/api';
import ListItem from './commpent/list-item';

export default class ContractSYSList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      status: null,
      tabSources: [
        {
          tab: '全部',
          type: null,
        },
        {
          tab: '待签署',
          type: 4,
        },
        {
          tab: '已签署',
          type: 6,
        },
      ],
    };
  }

  componentDidMount() {}

  render() {
    const { status, tabSources } = this.state;

    return (
      <View style={styles.container}>
        <HeadTabs
          tabSources={tabSources}
          changeStatus={(type) => this.changeStatus(type)}
          status={status}
        />
        <XMListView
          url='contract-api/api/v1/contract/pageFindMyContracts'
          methods='GET'
          params={{ state: status }}
          dataPropsName='data.records'
          renderRow={(item) => this._renderItem(item)}
          numColumns={1}
          renderEmpty={() => (
            <XMEmpty
              emptyImg={empty01}
              desc='暂时没有合同及协议'
              boxStyle={{ marginTop: px2dp(200) }}
            />
          )}
        />
      </View>
    );
  }

  changeStatus = (status) => {
    this.setState({ status });
  };

  _renderItem = (item) => {
    return (
      <ListItem
        detail={item}
        onClick={(detail) => {
          console.log('🚀🚀🚀wimi======>>>detail', detail);
          // 跳转签署页面或者合同查看页面
          msg.emit('router: goToNext', {
            routeName: 'ContractDetail',
            routerFrom: 'ContractList',
            contractStatus: detail.contractStatus === 3 ? 4 : 2,
            data: detail
          });
        }}
      />
    );
  };

  toDetail = (data) => {
    msg.emit('router: goToNext', {
      routeName: 'CarOrderDetail',
      data: data,
    });
  };

  itemClick = (item) => {
    // 处理点击item
    // 跳转签署页面或者合同查看页面
    msg.emit('router: goToNext', {
      routeName: 'ContractDetail',
      routerFrom: 'ContractList',
      contractStatus: item.contractStatus === 3 ? 4 : 2,
      data: item,
    });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,
  },
});
